<template>
  <div id="home">
    <el-row>
      <el-col :xs="0" :sm="2" :md="6">
        <div class="grid-content bg-purple"></div>
      </el-col>
      <el-col :xs="24" :sm="20" :md="12">
        <div class="grid-content bg-purple main" style="margin-top: 50px;">
          <el-tabs type="border-card">
            <el-tab-pane>
              <span slot="label">
                <i class="el-icon-s-home"></i> 首页
              </span>
              <div style="margin-top: 20px;">
                <!-- <div slot="header" class="clearfix">
                  <span>视频传输</span>
                </div>-->
                <div class="text item upload_box">
                  <div style="height: 40px; line-height: 40px;">
                    <span>上传视频:</span>
                    <div class="upload">
                      <el-button type="primary" :disabled="isA">点击上传视频</el-button>
                      <input
                        type="file"
                        class="upload_file"
                        @change="upload"
                        accept="video/*"
                        title="上传视频"
                        :disabled="isA"
                      />
                    </div>
                  </div>
                  <el-divider></el-divider>
                  <div>
                    <div style="margin-top: 10px;">
                      <span>异常检测结果：</span>
                      <span
                        style="float: right;"
                        :class="{ 'my-error': checkType === 1, 'my-succes': checkType === 0 }"
                        v-if="isSucceed"
                      >{{ checkResult }}</span>
                    </div>
                    <el-divider v-if="isShowUl"></el-divider>
                    <ul v-show="isShowUl" class="ul">
                      <li
                        v-for="(item, index) in files"
                        :key="index"
                        @click="showVideo(index)"
                        @mouseover="mouseOver(index)"
                        @mouseout="mouseOut(index)"
                        title="点击播放"
                      >
                        <i class="el-icon-video-camera"></i>
                        {{ item.name }}
                        <span
                          style="float: right;"
                        >{{ (item.size / 1024 / 1024).toFixed(2) }}MB</span>
                        <i
                          :class="{ 'el-icon-close' : isPhone || index === activeIndex, 'el-icon-circle-check': !isPhone && index !== activeIndex }"
                          style="float: right;margin-right: 10px;color: #409eff;"
                          title="点击删除"
                          @click.stop="open(index)"
                        ></i>
                      </li>
                    </ul>
                    <el-progress :percentage="percentage" v-show="isShowUl"></el-progress>
                  </div>
                  <el-divider></el-divider>
                </div>
                <div class="video_box">
                  <span>视频播放区域：</span>
                  <div class="video" style>
                    <video :src="videoSrc" class="video" preload controls v-show="isShow"></video>
                    <i class="el-icon-close" v-show="isShow" title="取消播放" @click="closeVideo"></i>
                  </div>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane>
              <span slot="label">
                <i class="el-icon-setting"></i>设置
              </span>
              <div class="format">
                <span>自定义上传格式：</span>
                <el-checkbox-group v-model="checkList">
                  <el-checkbox label="wmv"></el-checkbox>
                  <el-checkbox label="asf"></el-checkbox>
                  <el-checkbox label="asx"></el-checkbox>
                  <el-checkbox label="rm"></el-checkbox>
                  <el-checkbox label="rmvb"></el-checkbox>
                  <el-checkbox label="mp4"></el-checkbox>
                  <el-checkbox label="avi"></el-checkbox>
                  <el-checkbox label="dat"></el-checkbox>
                  <el-checkbox label="mkv"></el-checkbox>
                  <el-checkbox label="flv"></el-checkbox>
                  <el-checkbox label="vob"></el-checkbox>
                </el-checkbox-group>
              </div>
              <el-divider></el-divider>
              <div class="size">
                <span>自定义文件大小(单位：MB)：</span>
                <el-input-number
                  v-model="size"
                  :min="1"
                  label="自定义文件大小(单位：MB)："
                ></el-input-number>
              </div>
            </el-tab-pane>
            <el-tab-pane>
              <span slot="label">
                <i class="el-icon-s-help"></i>帮助
              </span>
              <div class="help-box">
                <h3>1. 首页</h3>
                <p>
                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;点击上传视频，会出现一个选择文件窗口，默认可以选择所有类型的视频文件。选择好文件后点击打开，系统会自动检测视频是否有异常（超出指定大小，格式不正确），如果有异常，则上传失败，反之上传成功。上传成功后会有一个文件列表，
                  <strong>点击</strong>可以播放，也可以
                  <strong>删除</strong>文件。
                  <strong>注意：同一个文件只能上传一次。</strong>
                </p>
                <h3>2. 设置</h3>
                <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;选定允许上传的视频格式。限制视频大小。</p>
              </div>
            </el-tab-pane>
            <el-tab-pane>
              <span slot="label">
                <i class="el-icon-s-custom"></i>关于
              </span>
              <p>版本号: 2.0.0 Beta</p>
            </el-tab-pane>
          </el-tabs>
          <div class="user">
            <p>{{ $route.params.name }}, <el-link type="primary" :underline="false" icon="el-icon-close" @click="logout">注销</el-link></p>
            
          </div>
        </div>
      </el-col>
      <el-col :xs="0" :sm="2" :md="6">
        <div class="grid-content bg-purple"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { setInterval, clearInterval } from "timers";
let isPhone = false;
if (/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
  // 手机
  isPhone = true;
} else {
  // 电脑
  isPhone = false;
}
export default {
  name: "home",
  data() {
    const checkList = [
      "wmv",
      "asf",
      "asx",
      "rm",
      "rmvb",
      "mp4",
      "3gp",
      "mov",
      "m4v",
      "avi",
      "dat",
      "mkv",
      "flv",
      "vob"
    ];
    const getAccept = () => {
      let accept = "";
      checkList.forEach(item => {
        accept += `video/${item},`;
      });
      return accept.slice(0, accept.length - 1);
    };
    return {
      centerDialogVisible: false,
      files: [],
      videoSrc: "",
      isShow: false,
      isShowUl: false,
      isShowDelFile: false,
      activeIndex: -1,
      isSucceed: false,
      percentage: 0,
      isA: false,
      isPhone,
      checkList,
      accept: getAccept(),
      checkResult: "正常",
      size: 500,
      checkType: 0
    };
  },
  methods: {
    upload(e) {
      let file = e.target.files[0];
      this.isSucceed = true;
      if (
        !this.checkList.includes(file.type.slice(file.type.indexOf("/") + 1))
      ) {
        this.checkResult = "视频格式不正确";
        this.checkType = 1;
        return;
      }
      if (file.size / 1024 / 1024 > this.size) {
        this.checkResult = `视频大小超过指定范围（${this.size}MB）`;
        this.checkType = 1;
        return;
      }

      this.isA = true;

      let name = file.name;
      let size = file.size;
      this.computedPercentage(size);
      
      this.isShowUl = true;
      let fr = new FileReader();
      fr.readAsDataURL(file);
      fr.onloadend = ee => {
        this.files.push({
          name,
          size,
          url: ee.target.result
        });
      };
    },
    showVideo(index) {
      this.isShow = true;
      this.videoSrc = this.files[index].url;
    },
    mouseOver(index) {
      this.activeIndex = index;
    },
    mouseOut() {
      this.activeIndex = -1;
    },
    open(index) {
      const _this = this;
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          _this.files.splice(index, 1);
          if (_this.files.length === 0) {
            _this.isShowUl = false;
          }
          _this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {
          _this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    closeVideo() {
      this.videoSrc = "";
      this.isShow = false;
    },
    computedPercentage(size) {
      const _this = this;
      let mysize = size / 1024 / 1024;
      let v = Math.floor(300 / mysize)
      this.percentage = 0;
      setTimeout(() => {
        let timer = setInterval(() => {
          if(_this.percentage + v >= 100) {
            _this.percentage = 100;
            clearInterval(timer);
            _this.isA = false;
            _this.checkResult = "正常";
            this.checkType = 0;
            return;
          }
          _this.percentage += v;
        }, 100);
      }, 100)
    },
    logout() {
      this.$confirm("确认注销吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$router.push({ name: "login" });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    }
  }
};
</script>

<style scoped>
#home {
  background-image: linear-gradient(-90deg, #29bdd9 0%, #276ace 100%);
  height: 100%;
  width: 100%;
}
.el-col {
  border-radius: 4px;
}

.grid-content {
  /* border-radius: 4px; */
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  /* background-color: #f9fafc; */
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 100%;
}

.upload {
  position: relative;
  float: right;
}

.upload .upload_file {
  position: absolute;
  left: 0;
  top: 0;
  width: 126px;
  height: 40px;
  z-index: 100;
  opacity: 0;
  cursor: pointer;
}
.video_box {
  width: 100%;
  height: 50vh;
  position: relative;
}
.video {
  width: 100%;
  height: 50vh;
}
.video_box .el-icon-close {
  position: absolute;
  top: 0;
  right: 0;
  cursor: pointer;
}

.ul {
  border: 1px solid #409eff;
  margin: 0;
  padding: 0;
  margin-top: 40px;
  margin-bottom: 10px;
  border-radius: 10px;
}

.ul .el-icon-close {
  color: rgb(124, 119, 119);
}

.ul li {
  list-style: none;
  padding-bottom: 10px;
  padding-top: 10px;
  padding-left: 20px;
  padding-right: 20px;
  border-radius: 10px;
  transition: color 0.5s, background 0.5s;
  cursor: pointer;
}

.ul li:hover {
  color: #409eff;
  background: #f5f7fa;
}

.my-error {
  color: #f56c6c;
}
.my-succes {
  color: #67c23a;
}
.el-checkbox-group {
  margin-top: 15px;
  display: flex;
  flex-wrap: wrap;
}
.el-checkbox-group label {
  width: 10%;
  height: 30px;
}
.el-input-number {
  float: right;
}
.size {
  height: 40px;
  line-height: 40px;
}

h3 {
  font-weight: 400;
  color: #1f2f3d;
}

p {
  font-size: 14px;
  color: #5e6d82;
  line-height: 1.5em;
}

.main {
  position: relative;
}

.main .user {
  position: absolute;
  top: 0;
  right: 15px;
}
</style>